<template>
  <div class="nav-header">
    <!-- 左侧导航 -->
    <ul class="left-entry" >
      <img src="../assets/BILIBILI_LOGO.svg" style="width:60px" alt="">
      <li class="v-title"><a href="/">首页</a></li>
      <li class="v-popover-wrap animated" v-for="item in navLeftList" :key="item"><a href="#">{{ item }}</a></li>
    </ul>
    <!-- 搜索框 -->
    <div class="search-container">
        <Input search placeholder="上海交通大学..." />
    </div>
    <!-- 右侧导航 -->
    <Dropdown>
        <a href="javascript:void(0)">
          <div class="header-login-entry"> 
            <span v-if="!$store.state.isLogin" @click="$store.commit('changeLoginView',true)">登录</span>
            <img v-else :src=$store.state.constant.base_url+$store.state.userInfo.avatar @click="$store.commit('goUser',$store.state.userInfo.id)" alt="" height="36" width="36"> 
          </div>
        </a>
        <template #list>
            <DropdownMenu v-if="$store.state.isLogin">
                <DropdownItem>个人中心</DropdownItem>
                <DropdownItem>投稿服务</DropdownItem>
                <DropdownItem style="border-bottom: 1px solid #ccc;">推荐服务</DropdownItem>
                <DropdownItem @click="logout">退出登录</DropdownItem>
            </DropdownMenu>
        </template>
    </Dropdown>
    <ul class="right-entry">
      <li class="v-popover-wrap animated" v-for="item in navRightList"><a href="#">{{ item }}</a></li>
    </ul>
  </div>
</template>

<script>
  export default {
      name:'Nav',
      data () {
          return {
              navLeftList:['番剧','直播','游戏中心','会员购','漫画','赛事','春日'],
              navRightList:['大会员','消息','动态','收藏','历史','创作中心'],
          }
      },
      methods:{
        logout(){
          sessionStorage.removeItem('token')
          sessionStorage.removeItem('userInfo')
          this.$store.commit('changeLogin')
          alert('已退出登录')
        }
      },
      created(){
        this.$store.commit('changeLogin')
        this.$store.commit('getUser')
      }
  }
</script>

<style> 
  .nav-header a{
    font-weight: 500 !important; 
  }

  .nav-header{
    position: fixed;
    top: 0;
    display: flex;
    width: 100%;
    height: 64px;
    box-shadow: inset 0 -1px #f1f2f3;
    background-color: #fff;
    z-index: 1002;
    min-width: 1058px;
  }
  /* 左侧导航 */
  .left-entry{
    display: flex;
    line-height: 64px;
    margin-left: 20px;  
  }

  .v-title{
    margin-left: 10px;
    margin-right: 15px;
  }

  .v-popover-wrap{
    margin-right: 15px;
  }

  .v-popover-wrap:hover{
    animation: bounce;
    animation-duration: 1s;
  }

  /* 搜索框 */
  .search-container{
    flex:1;
    height: 38px;
    line-height: 64px;
    border-radius: 8px 8px 0px 0px;
  }
  /* 右侧导航 */
  .right-entry{
    display: flex;
    line-height: 64px;
    margin-left: 20px;
  }

  .header-login-entry {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #fff;
    background: #00AEEC;
    text-align: center;
    letter-spacing: 0;
    font-size: 14px;
    line-height: 36px;
    margin-left: 14px;
    margin-top: 14px;
    cursor: pointer;
    overflow: hidden;
  }

  /* .v-popover{
    padding-top: 12px;
    margin-left: -12px;
    transform: translate3d(-50%,0,0);
    top: 100%;
    left: 50%;   
    position: absolute;
    transition: .3s;
    z-index: 1; 
    background-color: pink;
  } */

</style>
